<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        table{
            margin: auto;
            text-align: center;
            border: 1px solid darkgrey;
        }
        th,td{
            width: 50px;
            border:1px solid darkgrey;
        }
        form{
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th><input type="checkbox" name="cb"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);">删除</a></td>
        </tr>
    </table>
    <form>
        <input type="button" id="all" value="全选">
        <input type="button" id="NoAll" value="取消全选">
        <input type="button" value="反选" id="reverse">
    </form>

</body>
<script>
    var all = document.getElementById("all");
    var NoAll = document.getElementById("NoAll");
    var reverse = document.getElementById("reverse");
    var byName = document.getElementsByName("cb");//获取所有的name为cb的标签（利用这种方法可以将复选框进行全选）
    var tagName = document.getElementsByTagName("tr");
    /**复选框的全选操作*/
    all.onclick=function () {

        for (var i = 0; i <byName.length; i++) {
            byName[i].checked=true;//没有代码提示，将check的属性变为true
        }
    }
    /**复选框的取消全选操作*/
    NoAll.onclick=function () {
        for (var i = 0; i < byName.length; i++) {
            byName[i].checked=false;

        }
    }
    /**复选框进行反选操作*/
    reverse.onclick=function () {
        for (var i = 1; i < byName.length; i++) {
            byName[i].checked=!byName[i].checked;//直接给复选框的值取反
        }
    }
    /**设置所有复选框的状态与第一复选框相同*/
    byName[0].onclick=function () {
        for (var i = 1; i < byName.length; i++) {
            this.checked=byName[0].checked;
        }

    }
    /**设置鼠标经过时，表格的背景色出现不同的变化*/
    for (var i = 0; i < tagName.length; i++) {
        //鼠标经过变红
        tagName[i].onmouseover=function () {
            this.style.backgroundColor="#f00";

        }
        //鼠标移开变白
        tagName[i].onmouseout=function () {
            this.style.backgroundColor="#fff";
        }
    }
</script>
</html>